<template>
	<view class="logDetailContainer">
		<!-- 详情区域开始 -->
		
		<!-- 详情区域结束 -->
		<!-- 评论区域开始 -->
		<view class="pinglunContent">
			<view class="pinglunHeader">
				<view class="title">
					<text>评论</text>
				</view>
				<view class="order">
					<text>排序</text>
					<image src="../../../static/jzqIcon/order.png" mode=""></image>
				</view>
			</view>
			<!-- 评论内容区域 -->
			<view class="pinglunItem">
				<commonHeader></commonHeader>
				<view class="itemContent">
					<view class="contentTitle">
						<text>
							看书也是我的爱好，我最近在看这些书
						</text>
					</view>
					<view class="contentImgs">
						<image src="../../../static/jzqImgs/contentImg2.png" mode=""></image>
						<image src="../../../static/jzqImgs/contentImg3.png" mode=""></image>
						<image src="../../../static/jzqImgs/contentImg4.png" mode=""></image>
					</view>
				</view>
				<!-- 评论内容区域结束 -->
				<commonFooter :isShowShare="false"></commonFooter>
				<!-- 评论点赞回复区域结束 -->
			</view>
		</view>
		<u-gap height="2" bg-color="#ccc"></u-gap>
		<!-- 评论区域结束 -->
		<view class="pinglunList" v-for="(item,index) in 3" :key="index">
			<commonHeader></commonHeader>
			<view class="listContent">
				<text>咦，还不错哟！</text>
				<view class="list">
					<view class="listItem">
						<text class="user">Kuder测评:</text>
						<text class="hfContent">加油！加油！加油！加油！加油！加油！</text>
					</view>
					<view class="listItem">
						<text class="user">小明爱洗头:</text>
						<text class="hfUser">回复 Kuder测评:</text>
						<text class="hfContent">加油！加油！加油！加油！加油！加油！</text>
					</view>
					<view class="listMore">
						<text>查看全部3条回复</text>
					</view>
				</view>
			</view>
			<commonFooter :isShowShare="false"></commonFooter>
			<!-- 评论列表内容区域结束 -->
		</view>
		<!-- 评论列表区域结束 -->
		<u-gap height="2" bg-color="#ccc"></u-gap>
		<!-- 底部区域开始 -->
		<view class="footerShare position-sticky">
			<view class="shareInput">
				<u-search :search-icon="seaIcon" :show-action="false" placeholder="分享您的看法"></u-search>
			</view>
			<view class="footerIcon">
				<view class="shareIcon">
					<image src="../../../static/jzqIcon/share.png" mode=""></image>
					<text>分享</text>
				</view>
				<view class="dianzanIcon">
					<image src="../../../static/jzqIcon/dianzan.png" mode=""></image>
					<text>点赞</text>
				</view>
			</view>
		</view>
		<!-- 底部区域结束 -->
	</view>
</template>

<script>
	import commonHeader from "../../../components/commonHeader"
	import commonFooter from "../../../components/commonFooter"
	import commonContainer from "../../../components/commonLogContainer"
	export default {
		components: {
			commonContainer,
			commonHeader,
			commonFooter
		},
		data() {
			return {
				// 输入框图标
				seaIcon: "../../../static/jzqIcon/searchIcon.png"
			};
		}
	}
</script>

<style lang="scss" scoped>
	.position-sticky {
	    position: -webkit-sticky!important;
	    position: sticky!important;
	}
	.logDetailContainer {

		// 评论区域样式
		.pinglunContent {
			padding: 20rpx 34rpx;

			.pinglunHeader {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					text {
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.order {
					color: #CCCCCC;

					text {
						font-size: 24rpx;
					}

					image {
						width: 20rpx;
						height: 20rpx;
						margin-left: 10rpx;
					}
				}
			}

			// 评论内容样式
			.pinglunItem {

				margin: 20rpx 0;



				.itemContent {
					margin-left: 80rpx;

					.contentTitle {
						margin: 20rpx 0;
					}

					.contentImgs {
						display: flex;
						align-items: center;
						justify-content: space-evenly;

						image {
							width: 180rpx;
							height: 180rpx;
						}
					}
				}

				// 评论内容样式结束
				.ItemFooter {
					display: flex;
					margin-top: 20rpx;
					justify-content: flex-end;
					align-items: center;
					color: #CCCCCC;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}

				}
			}
		}

		// 评论列表区域样式
		.pinglunList {
			margin-bottom: 40rpx;
			padding: 20rpx 34rpx;

			.listContent {
				margin-left: 76rpx;
				margin-top: 20rpx;

				.list {
					margin: 20rpx 0;
					padding: 26rpx;
					background-color: #F2F2F2;
					border-radius: 15rpx;

					.listItem {
						.user {
							font-weight: bold;
						}

						.hfUser {
							font-weight: bold;
						}
					}

					.listMore {
						color: #2A6CAC;
						font-weight: bold;
					}
				}
			}
		}

		// 底部区域样式
		.footerShare {
			width: 100%;
			background-color: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			margin: 20rpx 0;
			border-top: 1rpx solid #CCCCCC;

			.shareInput {
				width: 402rpx;
			}
			.footerIcon{
				display: flex;
				color: #CCCCCC;
				align-items: center;
				justify-content: center;
				image{
					width: 40rpx;
					height: 40rpx;
				}
				.shareIcon{
					display: flex;
					margin-right: 10rpx;
					text{
						margin-left: 8rpx;
					}
				}
				.dianzanIcon{
					display: flex;
					text{
						margin-left: 8rpx;
					}
				}
			}
		}

	}
</style>
